<template>
	<view class="container">
		<!-- 商品详情内容 -->
			<view>
				<!--        <view class="image-container">
          <image v-if="product.img" :src="product.img" mode="aspectFit" :key="product.img"></image>
          <view v-else class="loading-spinner"></view>
        </view> -->
<!-- 				<view class="product-info1" style="margin-bottom: 20px;height: 50px;line-height: 50px;">
					<view class="product-title-section">
						<text class="product-title1">别克汽车下单</text>
					</view>
				</view> -->
				<view >
					<!-- <view class="product-title-section">
						<text class="product-title">{{ product.name }}</text>
					</view> -->
					<rich-text :nodes="product.info" style="width: 100%; height: 100vh; display: block;"></rich-text>
				</view>
			</view>

		<!-- 底部悬浮栏 -->
		<view class="bottom-fixed-bar">
			<view class="price">
				<view style="color: black;">
					{{product.name}}
				</view>
				<text>￥{{ product.price }}</text>
			</view>
			<button class="order-button" @click="placeOrder">立即下单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				product: {
					img: '',
					name: '',
					info: '',
					price: 0
				}
			};
		},
		onLoad(options) {
			// 获取页面传递的商品id参数
			const productId = options.id;
			console.log(productId)
			if (productId) {
				uni.setStorageSync('productId',productId)
				// 页面加载时请求商品详情接口
				this.getProductDetail(productId);
			} else {
				uni.showToast({
					title: '未获取到商品id',
					icon: 'none'
				});
			}
		},
		methods: {
			getProductDetail(productId) {
				uni.request({
					url: `https://car.ydk1.cn/goods/detail?id=${productId}`, // 使用获取到的商品id
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							this.product = res.data.data;
							if (this.product == null) {
								uni.showToast({
									title: '商品不存在',
									icon: 'none'
								});
								return false;
							}
							console.log(this.product);
						} else {
							uni.showToast({
								title: '获取商品详情失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},
			placeOrder() {
				// 公众号授权登录
				let openid = uni.getStorageSync('openid');
				console.log(openid)
				if(openid==''){
					uni.request({
						url:'https://car.ydk1.cn/wechat/login',
						method:'GET',
						success: (res) => {
							if (res.statusCode === 200) {
								if(res.data.url!=''){
									window.location.replace(res.data.url)
								}
							} else {
								uni.showToast({
									title: '登录失败',
									icon: 'none'
								});
							}
						}
					})
				}else{
					// 下单逻辑，请求下单接口
					uni.request({
						url: 'https://car.ydk1.cn/goods/pay', // 替换为实际的下单接口地址
						method: 'POST',
						data: {
							productId: uni.getStorageSync('productId'), // 假设商品对象中有 id 属性
							openid:openid
						},
						success: (res) => {
							if (res.statusCode === 200) {
								uni.showToast({
									title: '下单成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: '下单失败',
									icon: 'none'
								});
							}
						}
					});
				}

			}
		}
	};
</script>

<style scoped>
	.container {
		position: relative;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		/* 添加背景图片 */
		background-image: url('https://car.ydk1.cn/123.png');
		background-size: cover;
		/* 让背景图片覆盖整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
	}

	.product-scroll {
		flex: 1;
		overflow-y: auto;
	}

	.product-detail {
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	.image-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 60%;
		/* 保持图片宽高比为 16:9 */
		margin-bottom: 20px;
	}

	.image-container image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.loading-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40px;
		height: 40px;
		border: 4px solid rgba(0, 0, 0, 0.1);
		border-top: 4px solid #f00;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.product-info {
	    /* padding: 0 20px; */
	    z-index: 99;
	    /* 设置背景颜色为透明 */
	    background-color: transparent;
	    /* 添加边框圆角，可按需调整圆角大小 */
	    border-radius: 10px;
	    /* 设置宽度为屏幕宽度的 90% */
	    width: 100%;
	    /* 实现水平居中 */
	    margin: 0 auto;
	}
	
	.product-info1 {
		padding: 0 20px;
		z-index: 99;
	}

	.product-title-section {
		text-align: center;
		margin-bottom: 20px;
	}

	.product-title {
		font-size: 24px;
		font-weight: bold;
		color: #aa0000;
	}

	.product-title1 {
		font-size: 24px;
		font-weight: bold;
		color: #55aaff;
	}

	.bottom-fixed-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 20px;
		background-color: #fff;
		border-top: 1px solid #eee;
		z-index: 100;
		/* 确保悬浮栏在最上层 */
	}

	.price {
		font-size: 20px;
		color: #f00;
	}

	.order-button {
		background-color: #f00;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 0 20px;
		/* 调整内边距，只保留左右内边距 */
		font-size: 16px;
		height: 100%;
		/* 让按钮高度和底部栏高度一致 */
		display: flex;
		align-items: center;
		/* 垂直居中按钮文字 */
		justify-content: center;
		/* 水平居中按钮文字 */
		margin-right: 0;
	}

	.order-button:hover {
		background-color: #d90000;
	}
</style>